import React, { Component } from 'react'
import {SelectInter} from '../../types/vote'
import './select_item.css'
import {connect} from 'react-redux'

interface IProps{
    item:SelectInter,
    status:boolean,
    total:number,
    addVote:(vid:number,id:number,curUser:string) => void,
    vid:number
}

class SelectItem extends Component <IProps>{
    render() {
        let {text,num,id} = this.props.item;
        let {status,total,vid} = this.props;
        console.log(status);
        //状态：判断是否投过票
        //占比
        let width = num/total*100 + '%';
        let curUser:any = localStorage.getItem('username');
        return (
            <div className="select-warp" onClick={() => {this.addVote(vid,id,curUser)}}>
                {/* 展示文字 */}
                <div className="select-text" style={{display:status?'flex':''}}>
                    <span>{text}</span>
                    <span style={{display:status?'block':'none'}}>{num}</span>
                </div>
                {/* 投票比例 */}
                <div className="process" style={{width,display:status?'block':'none'}}></div>
            </div>
        )
    }

    //添加投票 
    //0.通过status来判断你是否投过票
    //1.仓库voteList找到对应的投票对象(vid)，通过选项id定位投票选项，num+1
    //2.voteUsers添加投票人员
    addVote = (vid:number,id:number,curUser:string) => {
        let {status} = this.props;
        if(status){
            //已经投过票
            alert("不能重复投票");
        }else{
            //没有投过票
            this.props.addVote(vid,id,curUser)
        }
    }
}


let stateMapToProps = (state:any) => {
    return {
        
    }
}


let dispatchMapToProps = (dispatch:any) => {
    return {
        addVote(vid:number,id:number,curUser:string){
            dispatch({type:'ADD_VOTE',vid,id,curUser})
        }
    }
}
export default connect(stateMapToProps,dispatchMapToProps)(SelectItem)
